import React from 'react'
import { TabBar } from 'antd-mobile';
import {Route,withRouter} from 'react-router-dom'
import {Home} from '../containers/home/home'
import {My} from '../containers/my/my'
import {Try} from '../containers/try'

// 外包一层withRouter来获取react routerv4的history变量
// 随后进行程序跳转
// 其他方法:Redirect组件需要渲染的动作中
// ref:https://stackoverflow.com/questions/42123261/programmatically-navigate-using-react-router-v4/46416793
export const FooterLayout = withRouter((props) => {
    const selectedTab = props.match.path
    return (
        <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
            <TabBar
                unselectedTintColor="#949494"
                tintColor="#33A3F4"
                barTintColor="white"
            >
                <TabBar.Item
                    title="首页"
                    key="home"
                    icon={<div className="iconfont iconxingzhuang"></div>}
                    selectedIcon={<div className="iconfont iconxingzhuang"></div>}
                    selected={selectedTab === '/'}
                    onPress={() => {
                        // 使用window.location会导致重新去请求一次http,然后返回回来再根据路径进行解析的过程
                        // 导致页面看起来一直在刷新,体验不好
                        // window.location=('/');
                        props.history.push('/')
                    }}
                >
                    <Route path="/" exact component={Home} />
                </TabBar.Item>
                <TabBar.Item
                    title="my"
                    key="user"
                    icon={<div className="iconfont iconxingzhuang9" />}
                    selectedIcon={<div className="iconfont iconxingzhuang9" />}
                    selected={selectedTab === '/user'}
                    onPress={() => {
                        // window.location=('/user')
                        props.history.push('/user')
                    }}
                >
                    <Route path="/user" component={My} />
                </TabBar.Item>
                <TabBar.Item
                    title="try"
                    key="try"
                    icon={<div className="iconfont iconxingzhuang3" />}
                    selectedIcon={<div className="iconfont iconxingzhuang3" />}
                    selected={selectedTab === '/try'}
                    onPress={() => {
                        // window.location=('/try')
                        props.history.push('/try')
                    }}
                >
                    <Route path="/try" component={Try} />
                </TabBar.Item>
            </TabBar>
        </div>
    )
})
